<template>
  <div class="ui-actionsheet"
   :class="{show:good.showCnt}"
    @click="action($event)">
    <div class="ui-actionsheet-cnt ui-pop">
        <div class="close" @click="close">×</div>
        <div class="sp-info bd-bottom">
            <div class="info-img">
                <img 
                v-for="(pic,index) in good.baseInfo.pics.slice(0,1)" 
                :key="index"
                 :src="pic.url">
            </div>
            <div class="info-word" style="top:.52rem;">
                <div class="c6 ui-nowrap-multi">
                    <span class="f16">{{good.baseInfo.name}}</span>
                </div>
                <div class="cff6900">
                    ￥<span class="f12">{{good.baseInfo.price}}</span>
                </div>
            </div>
        </div>
        <ul class="size-list" style="height:.58rem">
            <li class="cartnum clearfix">
                <span>购买数量</span>
                <div class="chose-num">
                    <span class="reduce" @click="reduce">
                        <i class="icons1"
                         :class="{'icons1-sub-disabled':num==1,'icons1-sub':num>1}"></i>
                    </span>
                    <span class="num">{{num}}</span>
                    <span class="plus" @click="num++">
                        <i class="icons1 icons1-add"></i>
                    </span>
                </div>
            </li>
        </ul>
        <div class="buttons btn select-attr-box">
            <ul class="ui-tiled ui-tiled-btn" style="height:.45rem">
                <li class="add cf f18 bgff6900" @click="addItem(good,num)">加入购物车</li>
            </ul>
        </div>
    </div>
  </div>
</template>
<script>
export default {
    data () {
        return {
            num: 1
        }
    },
  computed: {
      good() {
          
          return this.$store.state.good;
      }
  },
  methods: {
      close() {
          this.$store.commit('closeCnt');
          document.body.style.overflow = 'auto'
      },
      action(e) {
        if (e.target==document.querySelector('.ui-actionsheet')) {
            this.close()
        }
      },
      reduce() {
          if (this.num>1) {
              this.num--;
          }
      },
      addItem(good,count) {
        this.$store.commit('addItem',good,count);
        this.close();
      }
  }
}
</script>
<style>
.ui-pop{
    background-color: #fff;
    font-size: .14rem;
    text-align: left;
}
.ui-pop .close{
    border-radius: 50%;
    position: absolute;
    right: 12px;
    top: -17px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 17px;
    background-color: #fff;
    font-size: 24px;
    color: #999;
    text-align: center;
    z-index: 10000;
    -webkit-box-shadow: 0 0 4px rgba(51,51,51,.5);
    box-shadow: 0 0 4px rgba(51,51,51,.5);
}
</style>
<style lang="less" scoped>
.ui-actionsheet .ui-actionsheet-cnt{
    transform: translateY(120%);
}
.ui-actionsheet.show .ui-actionsheet-cnt{
    transform: translateY(0);
    transition: transform .3s;
}
.ui-actionsheet-cnt{
    width: 100%;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
}
.ui-actionsheet .ui-pop .sp-info{
    height: 1.35rem;
    position: relative;
}
.ui-pop .sp-info .info-img{
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    bottom: .16rem;
    left: .12rem;
    background-color: #fff;
}
.ui-pop .sp-info .info-img img{
    width: 100%;
    height: 100%;
    border-radius: .04rem;
}
.ui-pop .sp-info .info-word{
    position: absolute;
    left: 1.7rem;
}
.ui-actionsheet .ui-pop .size-list{
    padding-left: .12rem;
    overflow-y: auto;
}
.ui-actionsheet .ui-pop .size-list li{
    padding: .12rem 0;
}
.ui-actionsheet .ui-pop .size-list li .chose-num{
    float: right;
    height: .32rem;
    margin-right: .12rem;
    border: 1px solid #ddd;
    border-radius: .04rem;
}
.ui-actionsheet .ui-pop .size-list li .chose-num .reduce{
    border-right: 1px solid #ddd;
}
.ui-actionsheet .ui-pop .size-list li .chose-num .plus{
    border-left: 1px solid #ddd;
}
.ui-actionsheet .ui-pop .size-list li .chose-num .reduce,
.ui-actionsheet .ui-pop .size-list li .chose-num .plus{
    float: left;
    width: .35rem;
    height: 100%;
    line-height: .3rem;
    font-size: .24rem;
    text-align: center;
    color: #999;
}
.ui-actionsheet .ui-pop .size-list li .chose-num .num{
    float: left;
    width: .45rem;
    height: 100%;
    line-height: .3rem;
    font-size: .18rem;
    text-align: center
}
.ui-actionsheet .ui-pop .select-attr-box{
    position: relative!important;
}
.ui-pop .btn{
    bottom: 0;
    width: 100%;
}
.ui-tiled-btn{
    line-height: .49rem;
    color: #fff;
    text-align: center;
}
.ui-tiled{
    display: flex;
    width: 100%;
}
.ui-actionsheet .ui-pop .select-attr-box .ui-tiled li{
    height: .45rem;
    line-height: .45rem;
}
.ui-tiled-btn li.add{
    width: 40%;
}
.ui-tiled li{
    flex: 1;
}
</style>
